<template>
    <div>
        <FiltrateTemplate
            :templateSource="this.filterSource"
            @searchKeywordFun="searchKeywordFun"
            @clearKeywordFun="clearKeywordFun"
            @changeSourceFun="changeSourceFun"
            @changeAcceptFun="changeAcceptFun"
            @changePriceFun="changePriceFun"
            @changePriceConfirmFun="changePriceConfirmFun"
            @changePriceClearFun="changePriceClearFun"
            @changeTimeFun="changeTimeFun"
            @changeTimeComfirmFun="changeTimeComfirmFun"
            @changeTimeClearFun="changeTimeClearFun"
            @changeFlawFun="changeFlawFun"
            @changeBiddingModeFun="changeBiddingModeFun"
            @changeBillStatusFun="changeBillStatusFun"
            @changeflistOrderFun="changeflistOrderFun"
            @changeisCheckedFun="changeisCheckedFun"
            @confirmRateFun="confirmRateFun"
            @clearRateFun="clearRateFun"
            @clearAllChooseFun="clearAllChooseFun"
            @closeTagFun="closeTagFun"
            class="match_filter_box"
        ></FiltrateTemplate>
        <el-row>
            <el-col :span="24" class="form-title">
                <div class="form-title-con form-title-con1">票源信息</div>
            </el-col>
        </el-row>
        <el-table :data="tableData" @sort-change='sortChangeBill' stripe style="width: 100%" :cell-class-name="tableStyle" class="btn_margin_style" ref="offerData">
            <el-table-column prop="bill_product_create_time" label="发布时间" sortable width="124">
                <template slot-scope="scope">
                    <span>{{scope.row.bill_product_create_time_Y}}</span><br/><span>{{scope.row.bill_product_create_time_H}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="bill_style_name" label="票据来源"> </el-table-column>
            <el-table-column prop="contact_name" label="联系人"> </el-table-column>
            <el-table-column prop="contact_phone" label="联系方式"> </el-table-column>
            <el-table-column prop="drawer_name" label="出票企业"> </el-table-column>
            <el-table-column prop="acceptor_name" label="承兑人"> </el-table-column>
            <el-table-column prop="bill_sum_price" label="票面金额(万元)" sortable width="143"> </el-table-column>
            <el-table-column label="到期时间" sortable width="124">
                <template slot-scope="scope">
                    <span>{{scope.row.bill_deadline_time_format_Y}}</span><br/><span>{{scope.row.bill_deadline_time_format_T}}</span>
                </template>
            </el-table-column>
            <el-table-column label="背书瑕疵">
                <template slot-scope="scope">
                    <div :class="{'tableRed':scope.row.bill_flaw_ids != '1500'}">
                        {{ formatterFlaw(scope.row.bill_flaw_names.join(',')) }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="billEveryPlus" label="每十万扣" sortable v-if="!isDifference">
                <template slot-scope="scope" v-if="!isDifference">
                                <span class="hpx-red-tips">
                                    {{ scope.row.bidding_mode == 3210 ? '一口价' + scope.row.billEveryPlus + '元' : '竞价' }}
                                </span>
                </template>
            </el-table-column>
            <el-table-column
                    v-if="isDifference"
                    label="买卖差额"
                    prop="billOfferEveryPlus"
                    sortable="custom"
                    width="200">
                <template slot-scope="scope" v-if="isDifference">
                    <el-popover trigger="hover" placement="top" v-if="scope.row.bidding_mode == 3210">
                        <el-row>
                            <span>卖方({{ scope.row.bill_rate }}%)</span> / <span>买方({{ scope.row.offer_rate }}%)</span> / <span>差价</span>
                        </el-row>
                        <div slot="reference" class="name-wrapper">
                            <span class="hpx-red-tips">{{scope.row.billEveryPlus}}</span> / <span>{{scope.row.offerEveryPlus}}</span> / <span class="hpx-red-tips">{{scope.row.billOfferEveryPlus}}</span>
                        </div>
                    </el-popover>
                    <span class="hpx-red-tips" v-if="scope.row.bidding_mode == 3212">竞价</span>
                </template>
            </el-table-column>
            <el-table-column prop="simple_enterprise_name" label="关联中介"> </el-table-column>
            <el-table-column prop="bill_status_name" label="票据状态"> </el-table-column>
            <el-table-column prop="salesman" label="注册业务员"> </el-table-column>
            <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="billMatch(scope.row)"><i class="iconfont icon-sousuo icon_edit_style"></i> 匹配</el-button>
                    <el-button type="text" size="small" @click="billDetail(scope.row)"><i class="iconfont icon-xiangqing icon_edit_style"></i> 详细</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="right clear">
            <el-pagination
                    @size-change="onSizeChange"
                    @current-change="onFlipOver"
                    :current-page="pagination.currentPage"
                    :page-sizes="pagination.pageSizes"
                    :page-size="pagination.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total">
            </el-pagination>
        </div>
        <DialogContent ref="billDetailDialog" title="票据详情">
            <BillDetail :billModel="this.billModel" @closeDialog="closeDialog"></BillDetail>
        </DialogContent>
    </div>
</template>

<script lang="ts">
    import { Vue, Component } from 'vue-property-decorator';
    import Pagination from "@/types/Pagination";
    import DialogContent from '@common/DialogContent.vue';
    import BillDetail from '@common/BillDetail.vue';
    import _ from 'lodash'
    import { ellipsis } from '@/util/format'
    import moment from 'moment';
    import FiltrateTemplate from '@common/FiltrateTemplate.vue';
    import calc from 'calculatorjs';

    @Component({
        extends: Pagination,
        components: {
            DialogContent,
            BillDetail,
            FiltrateTemplate
        }
    })
    export default class MatchingQuote extends Vue {
        tableData = []
        filterSource: string = 'matchingQuote';
        orderBy: string;
        billModel: any = {}
        //是否显示买卖差额
        isDifference = false
        form = {
            billSource: '',
            acceptorType: '',
            billPrice: '',
            trem_billPrice: {
                minPrice: '',
                maxPrice: ''
            },
            deadTime: '',
            trem_deadTime: {
                minTime: '',
                maxTime: ''
            },
            flaw: '',
            biddingMode: '',
            billStatus: '801',
            flistOrder: '',
            isCheckedCode: '1',
            billRate: '',
            everyPlus: '',
            acceptor_name: ''
        }
        filterCondition = {
            billSource: '',
            acceptType: '',
            billPrice: { min: '', max: '', gtoe: false, ltoe: false },
            expiresDays: { min: '', max: '', gtoe: false, ltoe: false },
            flaw: '',
            biddingMode: '',
            billStatus: '801',
            flistOrder: '',
            isCheckedCode: '1',
            hopePrice: { rate: '', everyPlus: '' },
            acceptor_name: '',
            keyWord: ''
        }
        // 查询票据列表
        async getBillList () {
            let params = {
                acceptor_name: this.form.acceptor_name,
                acceptor_type_id: this.form.acceptorType,
                bidding_mode: this.form.biddingMode,
                bill_flaws: this.form.flaw,
                bill_status: this.form.billStatus,
                bill_sum_price_min: this.filterCondition.billPrice.min,
                bill_sum_price_max: this.filterCondition.billPrice.max == '+∞' ? '' : this.filterCondition.billPrice.max,
                bill_style_id: this.form.billSource,
                deadline_time_min: this.filterCondition.expiresDays.min,
                deadline_time_max: this.filterCondition.expiresDays.max,
                checkedStatus: this.form.isCheckedCode,
                isFirst: this.form.flistOrder,
                offer_rate: this.form.billRate,
                offer_every_plus: this.form.everyPlus,
                orderBy: this.orderBy,
                n: this.pagination.pageSize,
                p: this.pagination.currentPage
            }
            let res = await this.$http.get('bills/billProduct/list',{params})
            if(res.status == 200){
                res.data.listName.forEach((i) => {
                    i.bill_deadline_time = moment(i.bill_deadline_time).format('YYYY-MM-DD');
                    i.bill_product_create_time_Y = moment(i.bill_product_create_time).format('YYYY-MM-DD')
                    i.bill_product_create_time_H = moment(i.bill_product_create_time).format('HH:mm:ss')

                    i.bill_deadline_time_format_Y = moment(i.bill_deadline_time_format).format('YYYY-MM-DD')
                    i.bill_deadline_time_format_T = i.bill_deadline_time_format.substr(10, i.bill_deadline_time.length)
                    i.bill_sum_price = calc.div(i.bill_sum_price, 10000)
                })
                if(this.form.billRate || this.form.everyPlus){
                    this.isDifference = true
                    Vue.set(this,'isDifference',true)
                }else{
                    this.isDifference = false
                    Vue.set(this,'isDifference',false)
                }
                this.tableData = res.data.listName;
                this.pagination.total = res.data.page_info.items_number;
            }
        }
        sortChangeBill (column) {
            if(column.order == 'ascending'){
                this.orderBy = '+' + column.prop
            }else {
                this.orderBy = '-' + column.prop
            }
            this.getBillList()
        }
        filterFunction (filterForm: any) {
            this.pagination.currentPage = 1
            this.form = filterForm.filterModel;
            this.filterCondition = filterForm.filterCondition;
            if(this.form.billRate || this.form.everyPlus){
                this.isDifference = true
                Vue.set(this,'isDifference',true)
                this.$refs.offerData.clearSort()
                this.$nextTick(()=>{
                    this.$refs.offerData.sort('billOfferEveryPlus', 'descending')
                })
            }else{
                this.isDifference = false
                Vue.set(this,'isDifference',false)
                this.getBillList();
            }
        }
        searchKeywordFun (data) {
            this.filterFunction(data);
        }
        clearKeywordFun (data) {
            this.filterFunction(data);
        }
        changeSourceFun (data) {
            this.filterFunction(data);
        }
        changeAcceptFun (data) {
            this.filterFunction(data);
        }
        changePriceFun (data) {
            this.filterFunction(data);
        }
        changePriceConfirmFun (data) {
            this.filterFunction(data);
        }
        changePriceClearFun (data) {
            this.filterFunction(data);
        }
        changeTimeFun (data) {
            this.filterFunction(data);
        }
        changeTimeComfirmFun (data) {
            this.filterFunction(data);
        }
        changeTimeClearFun (data) {
            this.filterFunction(data);
        }
        changeFlawFun (data) {
            this.filterFunction(data);
        }
        changeBiddingModeFun (data) {
            this.filterFunction(data);
        }
        changeBillStatusFun (data) {
            this.filterFunction(data);
        }
        changeflistOrderFun (data) {
            this.filterFunction(data);
        }
        changeisCheckedFun (data) {
            this.filterFunction(data);
        }
        confirmRateFun (data) {
            this.filterFunction(data);
        }
        clearRateFun (data) {
            this.filterFunction(data);
        }
        clearAllChooseFun (data) {
            this.filterFunction(data);
        }
        closeTagFun (data) {
            this.filterFunction(data);
        }
        billDetail (row) {
            this.getBillDetail(row.bill_id);
        }
        closeDialog () {
            this.$refs['billDetailDialog'].closeDialog();
        }
        async getBillDetail (billId:string|number) {
            let res = await this.$http.get(`bills/billProduct/getBillDetails/${billId}`)
            if(res.status == 200){
                this.billModel = res.data;
                this.billModel.bill_deadline_time = moment(this.billModel.bill_deadline_time).format('YYYY-MM-DD');
                this.$refs['billDetailDialog'].openDialog();
            }
        }
        // 点击匹配
        bill_flaw: number;
        // 匹配
        billMatch (row) {
            if(_.indexOf(row.bill_flaw_ids, 1500) < 0){
                this.bill_flaw = -1
            }else {
                this.bill_flaw = 1
            }
            this.$router.push(`/platform/matchresult/${row.bill_sum_price}/${moment(row.bill_deadline_time).format('YYYY-MM-DD')}/${this.bill_flaw}/${row.acceptor_type_id}`)

        }
        tableStyle ({row, column}) {
            if (column.label == '背书瑕疵') {
                return 'tableRed'
            }
        }
        formatterFlaw (prop) {
            return ellipsis(prop, '...', 8)
        }
        loadDataForPagination() {
            this.getBillList()
        }
        mounted () {
            this.getBillList();
        }
    }
</script>

<style scoped lang="scss">
    .content {
        border: 1px solid #ddd;
        margin-top: 20px;
        padding-top: 20px;
    }
    .condition_tangs {
        border-top: 1px solid #ddd;
        margin-bottom: 0px;
    }
    .bill_rate{
        width: 88px;
    }
    .every_plus{
        width: 124px;
    }
    .tips{
        margin: 0 12px;
        cursor: pointer;
        width: 16px;
        height: 16px;
    }
    .form-title-con1 {
        width: 100% !important;
    }
    .match_filter_box {
        margin-top: 20px;
    }
    .hpx-red-tips{
        color: $__color-remind;
    }
</style>